<template>
    <div class="box">
        <el-card class="box-card">
            <h2 style="margin-top: -10px;">用户反馈</h2><hr/>
            <!-- <h3>描述问题</h3><hr style="width:400px;margin-left: 00px;"/> -->
            <h3 style="display: inline-block;">问题分类:&nbsp;&nbsp;</h3>
            <select style="display: inline-block;" class="select" id="select">
                <option>单图片识别</option>
                <option>多图片识别</option>
                <option>拍照识别</option>
                <option>实时识别</option>
                <option>用药量页面</option>
                <option>新闻页面</option>
                <option>百科页面</option>
            </select>
            <br/>
            <h3 style="display: inline-block;">图片:&nbsp;&nbsp;</h3>
            <div class="center">
                <el-upload
                id="img"
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
            </div>
            <div class="bottom">
                <h3 style="display: inline-block;" >问题描述:&nbsp;&nbsp;</h3><br/>
                <textarea class="text" id="posible"></textarea>
                <button class="btn" @click="btn" id="btn">提交</button>
            </div>
        </el-card>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        value: null
      };
    },
    methods: {
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },
      btn(){
        var select=document.getElementById("select");
        var img=document.getElementById("img");
        var posible=document.getElementById("posible");
        var btn=document.getElementById("btn");
        btn.addEventListener('click',function(){
          select.value='单图片识别',
          img.value='',
          posible.value=''
          
        })
        this.$message({
          showClose: true,
          message: '提交成功',
          type: 'success'
        });
      }
    }
  }
</script>
<style scoped>
  .box-card {
    width: 890px;
    height:600px;
  }
    .box{
        width:890px;
        height:600px;
        background-color: rgb(0, 246, 246);
        margin-top: 2px;
        position: relative;
    }
    .select{
        width:100px;
        height:30px
    }
    .center{
        width:670px;
        height:160px;
        background-color: rgb(255, 255, 255);
        overflow-y: scroll;
        overflow-y: hidden;
    }
    .bottom{
        width:670px;
        height:180px;
        background-color: rgb(255, 255, 255);
    }
    .text{
        width:670px;
        height:140px;
        resize: none;
    }
    .btn{
        width:90px;
        height:40px; 
        margin-left: 700px;   
        position: absolute;
        top: 525px;
        background-color: rgb(236, 235, 235);
    }
    .pingfen{
        width:400px;
        height:100px;
        background-color: rgb(255, 255, 255);
        position: absolute;
        top:70px;
        right:90px; 
    }
</style>